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ABSTRACT 

Knowledge of fundamentals of human-computer interaction resp. usability engineering is getting more and more 
important in technical domains. However this interdisciplinary field of work and corresponding degree programs are not 
broadly known. Therefore at the Hochschule Ruhr West, University of Applied Sciences, a program was developed to 
give teen-aged pupils insights into this area in a project-based learning environment with professional tools. Within the 
last 18 month this project was successfully conducted several times with participants of different age. 
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1. INTRODUCTION 

In Germany, the number of beginners of technical studies and especially computer science is comparably 
low, though the employment situation in this area is quite good. For this reasons several initiatives have been 
started, to demonstrate the wide range of activities in technical studies and jobs. Several universities 
cooperate with schools and organize open days, guest lectures of professors in schools or project days in 
universities. 

One additional aspect is the advancement of women in technical jobs. In Germany, every year in April the 
Girl’s Day is declared nation-wide, where the school girls can visit companies or universities and especially 
get an introduction to occupational fields which are normally dominated by men. 

Within this situation we wanted to define a project which gives insights into an area of computer science 
which is presumably attractive to young pupils who are interested in technology but also human sciences 
and/or design to show that computer science is more than pure coding. We chose a project-based approach 
(Blumenfeld, 1991) as we wanted to offer an experience which differs from normal school days, results in a 
product, that can be taken home and that stays in mind for a longer time though the project execution time is 
rather short. 

In the same project, professional tools and workflows should be presented to the participants as these 
normally are not available in schools and to demonstrate a more realistic working environment than academic 
or especially educational software development tools (see Terwelp and Dahm, 2011 for an overview) could 
do. On the other hand, we wanted the group to work on their own and create software which would run on 
their own computer or smartphone and have good memories on this day. Last but not least the project should 
be able to be carried out with participants of different ages and different levels of previous knowledge in 
computer science or programming. 


2. FIELD REPORT: UI-DEVELOPMENT WITH TEENAGERS 

The project “My personal MP3-Player” was executed several times since April 2011 at the Hochschule Ruhr 
West, University of Applied Sciences with 44 pupils aged 14-19. These workshops were integrated in 
different forms of cooperation with schools or nationwide programs like Girl’s Day. 
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2.1 The MP3-Player Software 

To allow participants with different knowledge in computer science to work in this project, a tool was 
required that allows the UI development without any programming, but also should have the possibility to 
discuss and change source code if wanted. The Adobe Flash Builder 4.5 was chosen, as it fulfills this 
requirement and is due to the Flash base more flexible on the graphical side than other GUI development 
tools. Furthermore this tool allows platform independent development incl. Windows-PC, Mac OS X, 
iPhone/iPad and Android devices. 

With this tool a MP3 -Player software was developed in advance in a way, that the UI can easily be 
modified, so that everyone can create the desired look & feel without the need of programming. 
Programming only is required if the behavior should be changed. The software structure therefore is prepared 
to support this with quite low effort. 

To avoid that participants stay close to the start configuration of the UI, the buttons and labels are 
completely disordered, every button has a different style, every text a different color, etc. Figure 1 shows this 
configuration. Though the interface looks very confusing it is fully functional. 


2.2 The Workshop 


At the beginning of the workshop a short introduction into the field of human-computer interaction was 
given. Jointly the typical controls and displayed information of MP3 players were discussed. The topic of 
meaningful grouping of elements was dealt with by using cards showing the controls and displayed 
information. The group was asked to organize these cards in a reasonable order at the blackboard. In addition 
to this UI introduction some options of image editing were shown. 

The first phase of creative work in this project was performed unstructured by intention. The participants 
worked depending on their preference alone or in pairs on the user interface of a MP3 -Player software for 
desktop PCs or Android phones. By this, every participant was able to develop own ideas in own speed. To 
support the realization with the software tools two tutors for eight groups were present. Button graphics were 
downloaded in most cases from Web Sites or self-drawn. Downloaded graphics were edited (mainly change 
of colors and cropping single buttons out of images) with either Gimp or Photoshop. 

The given user interface was modified by using the graphical editor of Adobe Flash Builder 4.5. Changes 
to the prepared behavior could be realized on a limited scale with support of the tutors. But this kind of 
requests occurred only rarely, presumably due to the fact, that the behavior of an MP3 player is in main 
aspects standardized. Depending on the interest, age and knowledge of the pupils parts of the source code 
were discussed with the participants. 

Figure 1 shows the start situation for the participants and pictures from the workshops. 



Figure 1 . Pictures from the workshop and start configuration of the MP3 player 


2.3 Results of the UI Development 

The pupils developed the user interface of an MP3 -Player according to their own preferences within 
approximately four hours. The main focus was on the appearance and styling, but also different questions of 
interaction concepts were considered. 
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The results have a high variety in their appearance, but are quite similar in functional behavior. This is 
likely due to the case, that a well-known stereotype for operating music players exists, which was discussed 
in the introduction to the project work. 

Another observation is related to the gender. Girls were more focused on aesthetics and the design of the 
overall concept while boys often tried to bring in symbols or graphics related to their interests or hobbies 
(e.g. favorite soccer club). Figure 2 shows different outcomes of the project. 



Figure 2. Different outcomes from the project day 


3. EVALUATION 


After some of the executed workshops a survey was carried out. The results of the N=24 pupils who took part 
in the evaluation overall was very positive. Especially they liked the possibility of creativity in the project 
and the practical work at the computer. This strengthens our approach of offering project-based workshops 
instead of pure trial lectures to elate someone. 

The overall average results on a five-level Likert scale with 1: very good, 5: insufficient of the most 
important items were: 

• I could gather a first insight into the topic: 1 : 42%, 2:58% 

• The project course fulfilled my expectations: 1:33%, 2:50%, 3:17% 

• The content of the project course was interesting: 1 :63%, 2:38% 

• The content was comprehensibly communicated: 1:58%, 2:42% 


Content of the project course was interesting 



fully agree agree neither nor disagree fully disagr. 


Content and level of project course was .. 


The course arouse my intererst in c.s. / hci 


0,8 

0.7 


loo high 
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Figure 3. Feedback comparison of pupils with and without courses in computer science (c.s.) at school. 


Looking more into detail the comparison of pupils with courses in computer science at school (N=13) 
with those who don’t (N=l 1) for most interesting items are shown in figure 3. 

The discussion of these results is within the limitation of the small sample size, but is enriched by verbal 
comments given back over the teacher a few days after the workshop. So they give a first indication how to 
improve the course. 

In average it shows that the flexible concept of the workshop, which allows adaptable amount of work 
with the source code, is suitable for participants with and without school knowledge in computer science. 
Some of the participants with already higher knowledge in computer science tend to prefer some deeper 
programming work than was offered so far. On the other hand this needs to be done carefully so that people 
with less knowledge will not get lost. 
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Another interesting item to evaluate is, if the course content is able to arouse interest in computer science 
and in human-computer interaction in particular. As the third graph in figure 3 shows this is the case. 
Especially the person with less knowledge (and lower age) learned more about different aspects of the tasks 
of software engineers. Positively mentioned by a high number of participants was the practical work, self- 
reliant in defining the goal and technically as long as possible, but getting support whenever required and at 
the end having their own software to take home. 


4. IMPLICATIONS FOR USABILITY ENGINEERING PROCESSES 

The success of working together with teenagers in a professional software tool for user interface 
programming could also have some implications on the usability engineering process (Mayhew, 1999) for 
software targeted for this group. 

A participatory design process (Muller, 2003) seems applicable in a manner that professional UI design 
software can be used with the teenagers. Normally either low-fidelity prototyping, e.g. showing screens of 
the user interface on paper, is used or a special software version is created. The first variant has the 
disadvantage that the important user experience (Buchenau and Fulton Suri, 2000) differs significantly from 
the final product, the latter one that additional effort in programming is required. 

Further research will be done to explore the range of products and the depth of interaction design which 
can be covered with teenagers in such a project. 


5. CONCLUSION 

The developed project “My personal MP3-Player” was performed successfully several times to inform and 
elate teenagers about topics in the area of computer science and especially human-computer interaction. The 
project-based approach with professional design and software development tools was according to the 
participants’ feedback very well accepted. The goal to arouse interest also was achieved. 

In further modifications of the project the aspect of integrating programming blocks for participants with 
previous knowledge need to be worked out. The current project duration is around four hours. The base 
concept of the workshop allows extending the duration by including other parts of the usability engineering 
life cycle like user testing into the project. Both together give the opportunity for a long-term project or 
regular course over a complete semester to hold contact between pupils and university. Details need to be 
worked out and evaluated. 

With the success of this project, another research topic for the future will be the integration of teenagers 
into the usability engineering process. 
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